<template>
  <div>
    <div class="flex">
      <div style="line-height: 32px">起始渐变色(选择渐变模式生效)：</div>
      <div>
        <el-color-picker
          @change="changeColor_gra"
          v-model="active_component.propValue.themeBtn_gradient_color"
          show-alpha
        ></el-color-picker>
      </div>
    </div>
    <div class="flex-wrap">
      <div
        class="zt_color_item"
        @click="changeZhuti(item)"
        :style="{ background: item }"
        v-for="(item, i) of colorList"
        :key="i"
      ></div>
      <div>
        <el-color-picker
          @change="changeColor"
          v-model="custom_color"
          show-alpha
        ></el-color-picker>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="flex-wrap">
      <div
        class="btn_box"
        @click="changeBtn(1, 4)"
        :class="
          active_component.propValue.indexedDB == 1 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn1 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(2, 30)"
        :class="
          active_component.propValue.indexedDB == 2 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn2 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(3, 30)"
        :class="
          active_component.propValue.indexedDB == 3 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn3 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(4, 0)"
        :class="
          active_component.propValue.indexedDB == 4 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn4 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(5, 0)"
        :class="
          active_component.propValue.indexedDB == 5 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn5 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(6, 0)"
        :class="
          active_component.propValue.indexedDB == 6 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn6 item_btn">按钮</div>
      </div>
      <div
        class="btn_box"
        @click="changeBtn(7, 0)"
        :class="
          active_component.propValue.indexedDB == 7 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn7 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(8, 30)"
        :class="
          active_component.propValue.indexedDB == 8 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn8 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(9, 4)"
        :class="
          active_component.propValue.indexedDB == 9 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn9 item_btn">按钮</div>
      </div>

      <div
        class="btn_box"
        @click="changeBtn(10, 4)"
        :class="
          active_component.propValue.indexedDB == 10 ? 'btn_box_active' : ''
        "
      >
        <div class="item_btn10 item_btn">按钮</div>
      </div>
    </div>
    <div>
      <el-divider></el-divider>
      <div>更多设置</div>
      <div class="flex">
        <el-form ref="form" label-width="80px">
          <el-form-item label="链接：">
            <el-input
              v-model="active_component.propValue.link"
              class="input-with-select"
            >
              <el-button slot="append" @click="showLinkSet">设置链接</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="内容：">
            <el-input
              style="width: 300px"
              v-model="active_component.propValue.value"
            ></el-input>
          </el-form-item>
          <el-form-item label="宽高：">
            <div class="flex-align">
              <el-input
                style="width: 110px"
                v-model="active_component.style.width"
              ></el-input>
              <div class="lianj"></div>
              <el-input
                style="width: 110px"
                v-model="active_component.style.height"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="圆角：">
            <div class="flex">
              <el-slider
                :max="active_component.style.height / 2"
                style="width: 200px"
                v-model="active_component.propValue.radius"
                :show-tooltip="false"
              ></el-slider>
              <el-input
                v-model="active_component.propValue.radius"
                style="width: 60px; margin-left: 10px"
              ></el-input>
              px
            </div>
          </el-form-item>
          <el-form-item label="透明：">
            <div class="flex">
              <el-slider
                style="width: 200px"
                v-model="active_component.propValue.opacity"
                :show-tooltip="false"
              ></el-slider>
              <el-input
                v-model="active_component.propValue.opacity"
                style="width: 60px; margin-left: 10px"
              ></el-input>
              %
            </div>
          </el-form-item>
          <el-form-item label="图标：">
            <div>
              <el-radio-group v-model="active_component.propValue.is_icon">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </div>
            <div v-if="active_component.propValue.is_icon">
              <div class="flex">
                <div>图标：</div>
                <div class="icon_box">
                  <img :src="active_component.propValue.icon" alt="" />
                </div>
              </div>
              <div class="upload_btn">
                <el-button size="small" type="primary" icon="el-icon-edit"
                  >上传</el-button
                >
              </div>
              <div class="flex">
                <div>大小：</div>
                <el-slider
                  :max="30"
                  style="width: 200px"
                  v-model="active_component.propValue.iconwidth"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.iconwidth"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                px
              </div>
            </div>
          </el-form-item>
          <el-form-item label="背景：">
            <div>
              <el-radio-group
                v-model="active_component.propValue.is_background"
              >
                <el-radio :label="true">默认</el-radio>
                <el-radio :label="false">自定义</el-radio>
              </el-radio-group>
            </div>
            <div v-if="!active_component.propValue.is_background">
              <div class="flex">
                <div>类型</div>
                <el-select
                  style="margin-left: 10px"
                  v-model="active_component.propValue.is_backType"
                  placeholder="请选择类型"
                >
                  <el-option :label="'颜色填充'" :value="1"> </el-option>
                  <el-option :label="'图片'" :value="2"> </el-option>
                </el-select>
              </div>
              <div
                class="flex"
                v-if="active_component.propValue.is_backType == 1"
              >
                <div>悬停</div>
                <colorPicker
                  @colorConfrim="colorConfrim"
                  style="margin-left: 10px"
                ></colorPicker>
              </div>
              <div v-if="active_component.propValue.is_backType == 2">
                <div class="flex" style="margin: 10px auto">
                  <div>图片：</div>
                  <div class="icon_box">
                    <img
                      :src="active_component.propValue.btnBackground"
                      alt=""
                    />
                  </div>
                </div>

                <div class="upload_btn">
                  <el-button size="small" type="primary" icon="el-icon-edit"
                    >上传</el-button
                  >
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="边框：">
            <div class="">
              <el-radio-group v-model="active_component.propValue.is_border">
                <el-radio :label="false">默认</el-radio>
                <el-radio :label="true">自定义</el-radio>
              </el-radio-group>
            </div>
            <div v-if="active_component.propValue.is_border">
              <div class="flex">
                <div>大小：</div>
                <el-slider
                  :max="30"
                  style="width: 200px"
                  v-model="active_component.propValue.borderWidth"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.borderWidth"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                px
              </div>
              <div class="flex">
                <div class="flex">
                  <div>初始</div>
                  <colorPicker
                    @colorConfrim="bodercolorConfrim"
                    :color="active_component.propValue.borderColor"
                    style="margin-left: 10px"
                  ></colorPicker>
                </div>
                <div class="flex" style="margin-left: 10px">
                  <div>悬停</div>
                  <colorPicker
                    @colorConfrim="bodercolorHoverConfrim"
                    :color="active_component.propValue.bordeHoverColor"
                    style="margin-left: 10px"
                  ></colorPicker>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="阴影：">
            <div class="">
              <el-radio-group v-model="active_component.propValue.is_shadow">
                <el-radio :label="false">默认</el-radio>
                <el-radio :label="true">自定义</el-radio>
              </el-radio-group>
            </div>
            <div v-if="active_component.propValue.is_shadow">
              <div class="flex">
                <div>颜色</div>
                <colorPicker
                  :color="active_component.propValue.shadowColor"
                  @colorConfrim="shadowcolorConfrim"
                  style="margin-left: 10px"
                ></colorPicker>
              </div>

              <div class="flex">
                <div style="width: 50px">Y轴：</div>
                <el-slider
                  :max="110"
                  style="width: 150px"
                  v-model="active_component.propValue.Yshadow"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.Yshadow"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                px
              </div>
              <div class="flex">
                <div style="width: 50px">X轴：</div>
                <el-slider
                  :max="110"
                  style="width: 150px"
                  v-model="active_component.propValue.Xshadow"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.Xshadow"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                px
              </div>
              <div class="flex">
                <div style="width: 50px">阴影：</div>
                <el-slider
                  :max="110"
                  style="width: 150px"
                  v-model="active_component.propValue.shadow"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.shadow"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                px
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="flex-center" style="margin-top: 10rem">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>

    <el-dialog
      title="设置链接地址"
      :visible.sync="inkSetDialog"
      width="600px"
      v-dialogDrag
      append-to-body
      v-if="inkSetDialog"
    >
      <linkSet @closeTK="closeTK"></linkSet>
    </el-dialog>
  </div>
</template>

<script>
import linkSet from "../common/linkSet.vue";
import colorPicker from "../common/colorPicker.vue";
export default {
  // props:{
  //   themeBtn: {
  //     type: String,
  //     default: '#f40'
  //   }
  // },
  components: { linkSet, colorPicker },
  props: ["componentId", "componentList", "activeCompont"],
  data() {
    return {
      inkSetDialog: false,
      active_component: {},
      custom_color: null,
      indexedDB: 1,
      btnlist: [
        { id: 1, checked: false },
        { id: 2, checked: false },
        { id: 3, checked: false },
        { id: 4, checked: false },
        { id: 5, checked: false },
        { id: 6, checked: false },
      ],
      themecolor: "",
      btnStyle2: {
        bg: "",
        color: "",
      },
      colorList: [
        "rgb(241, 58, 58)",
        "rgb(237, 61, 161)",
        "rgb(237, 61, 161)",
        "rgb(196, 0, 0)",
        "rgb(255, 101, 55)",
        "rgb(255, 192, 1)",
        "rgb(74, 179, 68)",
        "rgb(2, 178, 181)",
        "rgb(7, 108, 224)",
        "rgb(30, 80, 174)",
        "rgb(30, 80, 174)",
        "rgb(0, 160, 233)",
        "rgb(139, 14, 234)",
        "rgb(43, 43, 43)",
      ],
    };
  },
  created() {
    if (this.activeCompont) {
      this.active_component = this.activeCompont;
    } else {
      for (let key in this.componentList) {
        if (
          this.componentList[key].isDialog &&
          this.componentList[key].propValue.name == this.componentId
        ) {
          this.active_component = JSON.parse(
            JSON.stringify(this.componentList[key])
          );
        }
      }
    }
    console.log(this.active_component);
  },
  methods: {
    colorConfrim(e) {
      this.active_component.propValue.btnthemeHover = e;
    },
    bodercolorConfrim(e) {
      this.active_component.propValue.borderColor = e;
    },
    bodercolorHoverConfrim(e) {
      this.active_component.propValue.bordeHoverColor = e;
    },
    shadowcolorConfrim(e) {
      this.active_component.propValue.shadowColor = e;
    },
    changeZhuti(item) {
      // this.custom_color=item
      // this.themecolor=item
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--themeBtn", item);
      this.active_component.propValue.themebtnColor = item;
      localStorage.setItem("themeBtn", item);
    },
    enteritem_btn2() {
      this.btnStyle2.bg = "#fff";
      this.btnStyle2.color = this.themecolor;
    },
    leaveitem_btn2() {
      this.btnStyle2.bg = this.themecolor;
      this.btnStyle2.color = "#fff";
    },
    closeTK(e) {
      this.active_component.propValue.link = e.link;
      this.active_component.propValue.target = e.target;
      this.inkSetDialog = false;
    },
    showLinkSet() {
      this.inkSetDialog = true;
    },
    changeColor(e) {
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--themeBtn", e);
      this.active_component.propValue.themebtnColor = e;
      localStorage.setItem("themeBtn", e);
    },
    changeColor_gra(e) {
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--themeBtn-gradient-color", e);
      this.active_component.propValue.themeBtn_gradient_color = e;
    },
    pushcanvas() {
      if (this.activeCompont) {
        this.active_component.propValue.themebtnColor = localStorage.getItem("themeBtn");
        //  this.$store.commit('setComponentData',this.$store.state.componentData)
        this.$emit("closeTK"); //关闭弹框
      } else {
        this.active_component.propValue.themebtnColor =
          localStorage.getItem("themeBtn");
        let canvasStyle = this.$store.state.canvasStyleData;
        let component = this.active_component;
        this.active_component.propValue.themeBtnClass =
          "v-button_" + new Date().getTime();
        component.style.top = Number(canvasStyle.height);
        component.style.left = 600;
        this.$store.commit("addComponent", { component: component });
        canvasStyle.height = String(
          Number(canvasStyle.height) + Number(component.style.height)
        );
        this.$store.commit("setCanvasStyle", canvasStyle);
        this.$emit("closeTK"); //关闭弹框
      }
    },
    changeBtn(i, radius) {
      // this.indexedDB = i;
      this.active_component.propValue.indexedDB = i;
      this.active_component.propValue.radius = radius;
    },
  },
};
</script>

<style scoped lang="scss">
@import url("../../assets/css/themeBtn.css");
.lianj {
  width: 26px;
  height: 7px;
  display: inline-block;
  vertical-align: middle;
  background: url(https://fe.faisys.com/component_1_0/image/component.png?v=201811211600) -1118px
    0;
}
.icon_box {
  width: 118px;
  height: 68px;
  border: 1px solid #eee;
  background: #f6f6f6;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.icon_box:hover {
  background: rgba($color: #000000, $alpha: 0.5);
}
.upload_btn {
  margin: 10px;
}
</style>